<template>
	<div class="Article-header" :class="{ 'fixed-header': isScrolled }">
		<Header />
	</div>

	<div class="message-board-page" :style="{ backgroundImage: `url('https://api.anosu.top/img')` }">
		<!-- 左侧标题区域 -->
		<div class="sidebar">
			<h2 class="vertical-title">
				<span>留</span>
				<span>言</span>
				<span>板</span>
			</h2>
		</div>

		<!-- 右侧留言卡片区域 -->
		<!--
	    - @wheel="handleWheel": 监听鼠标滚轮事件，用于控制水平滚动
	   -->
		<div class="messages-container" @wheel="handleWheel">
			<!--
	      - 使用 CSS Grid 实现 3 行 N 列布局
	      - grid-template-rows: 定义固定的 3 行
	      - grid-auto-flow: column; 让元素优先垂直填充列
	      - grid-auto-columns: 定义每列的宽度
	      - gap: 定义行和列之间的间距
	     -->
			<div class="messages-grid">
				<div v-for="message in displayMessages" :key="message.id" class="message-card">
					<div class="card-decoration"></div>
					<div class="user-info">
						<div class="avatar">
							<img src="https://api.anosu.top/img" alt="用户头像" @error="handleImageError">
						</div>
						<div class="name">{{ message.username }}</div>
						<div class="date">{{ formatDate(message.time) }}</div>
					</div>
					<div class="message-content">
						<p>{{ message.comment }}</p>
					</div>
					<div class="message-footer">
						<span class="like-count" @click="addsupport(message.id)">
							<i class="icon-heart"></i> {{ message.support || 0 }}
						</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 固定在右下角的留言按钮 -->
		<button class="leave-message-btn" @click="openMessageForm">
			<!-- 注意：为了保持按钮样式，这里使用了文本 "+" 而非 icon-pencil -->
			留言
		</button>

		<!-- 留言表单弹窗 (默认隐藏) -->
		<div class="message-form-modal" v-if="showMessageForm">
			<div class="modal-content">
				<h3>发表留言</h3>
				<div class="form-group">
					<label for="message-content">留言内容</label>
					<textarea id="message-content" v-model="newMessage.content" rows="4"
						placeholder="请输入留言内容..."></textarea>
				</div>
				<div class="form-actions">
					<button @click="closeMessageForm" class="cancel-btn">取消</button>
					<button @click="insertMessage" class="submit-btn">提交留言</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue';
	import Header from '../header/Header.vue';
	import axios from 'axios';
	import useraxios from "@/api/apiaxios";
	import {
		useRouter
	} from 'vue-router';


	const isScrolled = ref(false);
	const intervalId = ref(null);
	const showClassTimeoutId = ref(null);
	// 定义处理滚动事件的函数
	const handleScroll = () => {
		// 获取当前窗口的垂直滚动距离 (兼容多种浏览器)
		const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
		const headerHeight = 50; // 你的头部实际高度，用于判断是否滚过了头部

		// 判断滚动方向
		if (currentScrollTop > lastScrollTop.value && currentScrollTop > headerHeight) {
			// --- 向下滚动 ---
			// 当前滚动位置 > 上次位置，表示向下滚动
			// 并且，滚动距离已经超过了头部的高度 (避免刚开始滚动一点点就隐藏)
			// 设置 isScrolled 为 true，这将给 .Index-header 添加 'fixed-header' 类
			isScrolled.value = true;

		} else if (currentScrollTop < lastScrollTop.value) {
			// --- 向上滚动 ---
			// 当前滚动位置 < 上次位置，表示向上滚动
			// 设置 isScrolled 为 false，这将移除 'fixed-header' 类
			isScrolled.value = false;
		}
		// else {
		// 如果 currentScrollTop === lastScrollTop.value (例如水平滚动或无垂直滚动)，则不改变状态
		// 如果 currentScrollTop <= headerHeight 并且向下滚动，也不隐藏，保持显示
		// }

		// 更新上一次滚动的位置，为下一次事件触发时的比较做准备
		// 使用 Math.max 确保 lastScrollTop 的值不会小于 0 (虽然 scrollTop 通常不会为负)
		lastScrollTop.value = Math.max(0, currentScrollTop);
	};
	onMounted(() => {
		getMessage();
		// 向 window 对象添加 'scroll' 事件监听器，并指定 handleScroll 函数作为回调
		window.addEventListener('scroll', handleScroll);

		// // 监听点击外部事件
		// onClickOutside(articleActiveRef, () => {
		// 	if (isshowTimeLine.value) {
		// 		isshowTimeLine.value = false;
		// 	}
		// });

	});

	// 组件卸载前执行
	onUnmounted(() => {
		// 从 window 对象移除之前添加的 'scroll' 事件监听器
		// 传入相同的 handleScroll 函数引用以确保正确移除
		// 这是非常重要的，可以防止内存泄漏
		window.removeEventListener('scroll', handleScroll);
		if (intervalId.value) {
			clearInterval(intervalId.value);
		}
		// Clear any pending timeout for adding the class effect
		if (showClassTimeoutId.value) {
			clearTimeout(showClassTimeoutId.value);
		}
	});

	// 留言数据 (保持不变)
	const messages = ref([]);

	// 计算属性返回所有留言 (保持不变)
	const displayMessages = computed(() => {
		return [...messages.value].sort((a, b) => b.id - a.id); // 按ID降序，新留言在前
	});

	// 留言表单显示状态 (保持不变)
	const showMessageForm = ref(false);

	// 新留言数据 (保持不变)
	const newMessage = ref({
		username: '',
		content: ''
	});

	// 打开留言表单 (保持不变)
	const openMessageForm = () => {
		showMessageForm.value = true;
	};

	// 关闭留言表单 (保持不变)
	const closeMessageForm = () => {
		showMessageForm.value = false;
		newMessage.value = {
			username: '',
			content: ''
		};
	};

	// 添加新留言 (保持不变)
	const addMessage = () => {
		if (!newMessage.value.username.trim() || !newMessage.value.content.trim()) {
			alert('请填写昵称和留言内容');
			return;
		}
		const message = {
			id: new Date().getTime(),
			username: newMessage.value.username,
			content: newMessage.value.content,
			date: new Date().toISOString().split('T')[0],
			avatar: `https://i.pravatar.cc/150?img=${Math.floor(Math.random() * 70)}`,
			likes: Math.floor(Math.random() * 10)
		};
		messages.value.unshift(message);
		closeMessageForm();
	};

	// 图片加载失败处理 (保持不变)
	const handleImageError = (event) => {
		event.target.src = 'https://i.pravatar.cc/150?img=0'; // 默认头像
	};

	// 处理鼠标滚轮事件 - 实现水平滚动 (保持不变)
	const handleWheel = (event) => {
		// 检查是否有垂直滚动意图（某些触控板或设备可能同时触发 deltaX 和 deltaY）
		// 如果 deltaX 不为 0，优先响应浏览器默认的水平滚动（如果有的话）
		if (event.deltaX !== 0) {
			return;
		}

		// 阻止默认的垂直滚动行为
		event.preventDefault();
		const container = event.currentTarget;
		// 根据 deltaY 的值调整 scrollLeft 实现水平滚动
		// deltaY > 0 表示向下滚，我们希望向右滚动 (增加 scrollLeft)
		// deltaY < 0 表示向上滚，我们希望向左滚动 (减少 scrollLeft)
		const scrollAmount = event.deltaY * 1.5; // 调整滚动速度
		container.scrollLeft += scrollAmount;
	};

	const router = useRouter();

	function addsupport(messageid) {
		const user = JSON.parse(sessionStorage.getItem("user"));
		if (user == null) {
			alert("请先登录");
			router.replace('/login');
		}
		const res = useraxios.post("/api/message/update", null, {
			params: {
				id: messageid
			}
		}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				if (response.data.code == 200) {
					getMessage();
				} else {
					console.log('获取message失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}

	function getMessage() {
		const res = axios.post("/api/message/selecteq", {}, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				console.log(response.data);
				if (response.data.code == 200) {
					messages.value = response.data.data;
				} else {
					console.log('获取message失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}

	function insertMessage() {
		const user = JSON.parse(sessionStorage.getItem("user"));
		if (user == null) {
			alert("请先登录");
			router.replace('/login');
		}
		const message = {
			author_id: user.id,
			comment: newMessage.value.content,
		};
		const res = useraxios.post("/api/message/insert", message, {
			headers: {
				'Content-Type': 'application/json' // 设置请求头为表单编码
			}
		});
		res
			.then(response => {
				if (response.data.code == 200) {
					getMessage();
					closeMessageForm();
				} else {
					console.log('获取message失败:', response.data.message);
				}
			})
			.catch(error => {
				// 请求失败，处理错误
				if (error.response) {
					// 请求已发送，但服务器响应的状态码不在 2xx 范围内
					console.log('响应状态码:', error.response.status);
					console.log('响应数据:', error.response.data);
				} else if (error.request) {
					// 请求已发送，但没有收到响应
					console.log('没有收到响应:', error.request);
				} else {
					// 在设置请求时发生错误
					console.log('错误信息:', error.message);
				}
			});
	}

	const formatDate = (timestamp) => {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = (date.getMonth() + 1).toString().padStart(2, '0');
		const day = date.getDate().toString().padStart(2, '0');
		return `${year}-${month}-${day}`;
	};
</script>

<style lang="scss" scoped>
	* {
		margin: 0px;
		padding: 0px;
		border: none;
		border-radius: 0px;
		font-size: 14px;
		font-weight: 300px;
		color: #000;
		overflow: hidden;
	}


	.Article-header {
		width: 100%;
		height: 50px;
		// background-color: antiquewhite;
		position: fixed;
		/* 改为 fixed 或 sticky 以便在滚动时保持在顶部 */
		top: 0;
		left: 0;
		z-index: 10;
		transition: transform 0.3s ease;
		/* 改为使用 transform 过渡，性能更好 */
		transform: translateY(0);
		/* 初始状态 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影 */
	}

	.fixed-header {
		/* margin-top: -50px;  <-- 使用 transform 替代 margin-top */
		transform: translateY(-100%);
		/* 向上移动自身高度 */
	}


	/* 全局CSS变量 (保持不变) */
	$primary-color: #3498db;
	$primary-hover: #2980b9;
	$card-bg: #ffffff;
	$text-primary: #2c3e50;
	$border-radius: 10px;
	$transition-time: 0.3s;

	/* 页面基本样式 (保持不变) */
	.message-board-page {
		height: 100vh;
		overflow: hidden;
		display: flex;
		// background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
	}



	/* 左侧边栏 (保持不变) */
	.sidebar {
		width: 80px;
		height: calc(100vh - 50px);
		margin-top: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		position: relative;
		box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);


		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
			z-index: 0;
		}
	}

	/* 竖向标题 (保持不变) */
	.vertical-title {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		span {
			display: block;
			color: var(--primary-color);
			font-size: 30px;
			font-weight: 700;
			margin: 8px 0;
			text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
		}
	}

	/* 留言容器区域 */
	.messages-container {
		flex: 1;
		overflow-x: auto;
		/* 允许水平滚动 */
		overflow-y: hidden;
		/* 禁止垂直滚动 */
		padding: 50px 80px 0px 20px;
		/* 调整底部 padding 为按钮留空间 */
		scrollbar-width: none;
		/* Firefox: 隐藏滚动条 */
		scroll-behavior: smooth;
		/* 平滑滚动 */

		// &::-webkit-scrollbar {
		//   // display: none; /* Chrome, Safari, Opera: 隐藏滚动条 */
		// }
	}

	/* 留言网格布局 - 核心修改 */
	.messages-grid {
		display: grid;
		/* 使用 Grid 布局 */
		grid-template-rows: repeat(3, 200px);
		/* 固定 3 行，高度等于卡片高度 */
		grid-auto-flow: column;
		/* 优先按列填充 */
		grid-auto-columns: 300px;
		/* 自动创建的列宽度等于卡片宽度 */
		gap: 80px;
		/* 设置行和列的间距 */
		padding: 50px 60px;
		/* 左右留一点内边距 */
		height: 100%;
		/* 计算网格总高度: 3行卡片高 + 2行间距 */
		width: max-content;
		/* 宽度由内容决定，以触发水平滚动 */
	}

	/* 留言卡片 */
	.message-card {
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 255, 255, 0.1); //卡片外框颜色
		padding: 24px;
		display: flex;
		flex-direction: column;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
		cursor: pointer;
		width: 300px;
		/* 使用变量 */
		height: 200px;
		/* 使用变量 */
		/* margin-bottom: $grid-gap;  移除 margin-bottom，使用 grid gap 代替 */
		position: relative;
		overflow: hidden;
		border-top: 3px solid transparent;
		flex-shrink: 0;
		/* 防止卡片在 flex/grid 布局中被压缩 */

		/* 卡片装饰元素 (保持不变) */
		.card-decoration {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 3px;
			background: linear-gradient(90deg, #ffbcfc, var(--primary-color));
			// background-size: 200% 100%;
			transition: all 0.5s ease;
		}

		&:hover {
			transform: translateY(-10px) scale(1.35);
			box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); //鼠标放上的阴影
			z-index: 10;

			.card-decoration {
				background-position: 100% 0;
			}

			.message-content p {
				// 在悬停时允许显示更多内容，但需要确保卡片高度固定
				// 如果需要悬停展开，可能需要动态调整卡片高度或使用 tooltip
				// 为了保持 3 行网格稳定，暂时不改变 -webkit-line-clamp
				-webkit-line-clamp: 4;
				/* 保持原来的截断行数 */
			}
		}
	}

	/* 用户信息 (保持不变) */
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	//头像
	.avatar {
		width: 45px;
		height: 45px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15px;
		border: 2px solid white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		flex-shrink: 0;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.3s ease;
		}

		.message-card:hover & img {
			transform: scale(1.1);
		}
	}

	.name {
		font-weight: 600;
		color: #000;
		font-size: 1.5rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 120px;
	}

	.date {
		margin-left: auto;
		color: var(--primary-color);
		font-size: 1.3rem;
		background-color: rgba(0, 0, 0, 0.05);
		padding: 3px 8px;
		border-radius: 12px;
		flex-shrink: 0;
	}

	/* 留言内容 (保持不变) */
	.message-content {
		flex: 1;
		overflow: hidden;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 5px;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); // 使用变量
			// background-color: #1164fe;
			pointer-events: none;
			opacity: 1;
			transition: opacity 0.3s ease;
		}

		.message-card:hover & {
			&::after {
				opacity: 0;
			}
		}

		p {
			margin: 0;
			line-height: 1.6;
			color: $text-primary;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 4;
			/* 限制显示的行数 */
			-webkit-box-orient: vertical;
			transition: all $transition-time ease;
			text-align: justify;
			/* 注意：由于卡片高度固定，这里不能无限展开 */
			max-height: calc(1.6em * 4);
			/* 大致限制高度为4行 */
		}
	}

	/* 留言底部 (保持不变) */
	.message-footer {
		margin-top: auto;
		/* 将页脚推到底部 */
		padding-top: 10px;
		/* 添加一点顶部间距 */
		display: flex;
		justify-content: flex-end;
	}

	.like-count {
		color: #e74c3c;
		font-size: 1rem;
		display: flex;
		align-items: center;

		i {
			margin-right: 5px;
			// 假设你有一个心形图标的 class 或 字体图标
			// content: '❤'; // 如果没有 icon font, 可以用字符代替
		}

		/* 添加心跳动画效果 (保持不变) */
		.message-card:hover & {
			animation: heartbeat 1.5s ease-in-out infinite both;
		}
	}

	@keyframes heartbeat {
		0% {
			transform: scale(1);
		}

		14% {
			transform: scale(1.2);
		}

		28% {
			transform: scale(1);
		}

		42% {
			transform: scale(1.2);
		}

		70% {
			transform: scale(1);
		}
	}

	/* 留言按钮 - 固定在右下角 (保持不变, 但修改了按钮文本) */
	.leave-message-btn {
		position: fixed;
		right: 30px;
		bottom: 30px;
		background-color: #4989fe;
		color: white;
		border: none;
		border-radius: 50px;
		padding: 12px 25px;
		font-size: 1rem;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);
		z-index: 50;

		// 使用文本 "+" 代替 icon
		&::before {
			content: "+";
			margin-right: 8px;
			margin-top: 2px;
			font-size: 1.2rem;
			font-weight: bold;
			line-height: 1; // 确保加号垂直居中
		}

		&:hover {
			background-color: $primary-hover;
			transform: translateY(-5px);
			box-shadow: 0 8px 20px rgba(52, 152, 219, 0.5);
		}

		&:active {
			transform: translateY(-2px);
		}
	}

	/* 留言表单模态窗 (保持不变) */
	.message-form-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 100;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.modal-content {
		background-color: $card-bg;
		border-radius: $border-radius;
		padding: 30px;
		width: 100%;
		max-width: 500px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
		animation: slideIn 0.3s ease;
		border-top: 4px solid $primary-color;

		h3 {
			margin-top: 0;
			margin-bottom: 20px;
			color: $text-primary;
			font-size: 1.3rem;
			text-align: center;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%);
				width: 50px;
				height: 2px;
				background-color: $primary-color;
			}
		}
	}

	@keyframes slideIn {
		from {
			transform: translateY(-20px);
			opacity: 0;
		}

		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.form-group {
		margin-bottom: 20px;

		label {
			display: block;
			margin-bottom: 8px;
			font-weight: 600;
			color: $text-primary;
		}

		input,
		textarea {
			box-sizing: border-box; // 确保 padding 不会撑大元素
			width: 100%;
			padding: 12px;
			border: 1px solid #ddd;
			border-radius: $border-radius;
			font-size: 1rem;
			transition: all $transition-time ease;
			background-color: #f9f9f9;

			&:focus {
				outline: none;
				border-color: $primary-color;
				box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
				background-color: white;
			}
		}

		textarea {
			resize: vertical; // 允许垂直调整大小
		}
	}

	.form-actions {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 25px;

		button {
			padding: 12px 28px;
			border-radius: 25px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			border: none; // 统一移除边框
		}

		.cancel-btn {
			background-color: #f0f0f0;
			color: #555;

			&:hover {
				background-color: #e0e0e0;
				transform: translateY(-2px);
			}
		}

		.submit-btn {
			background-color: $primary-color;
			color: white;

			&:hover {
				background-color: $primary-hover;
				transform: translateY(-2px);
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
			}
		}
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.sidebar {
			width: 60px;
		}

		.vertical-title {
			font-size: 1.5rem;
			letter-spacing: 5px;
		}

		// 移动端可能不需要严格的 3 行，或者卡片尺寸需要调整
		// 这里保持不变，但你可以根据需要调整 $card-width, $card-height, grid-template-rows 等
		// 例如，减小卡片尺寸：
		// $card-width: 250px;
		// $card-height: 180px;
		// .messages-grid {
		//   grid-template-rows: repeat(3, 180px);
		//   grid-auto-columns: 250px;
		//   height: calc(3 * 180px + 2 * #{$grid-gap});
		// }
		// .message-card {
		//   width: 250px;
		//   height: 180px;
		// }

		.leave-message-btn {
			padding: 10px 20px;
			font-size: 0.9rem;
			right: 20px;
			bottom: 20px;
		}

		.modal-content {
			width: 90%; // 移动端弹窗更宽
			padding: 20px;
		}
	}
</style>